import { Input, Select, Space } from "antd"
import React, { FC } from "react"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"

interface ISelectAndInputGroupProps {
	labelId?: string
	placeholderId?: string
	fieldNameSelect?: string
	fieldNameInput?: string
	isHideLabel?: boolean
	rules?: any[]
}

const SelectAndInputGroup: FC<ISelectAndInputGroupProps> = ({
	placeholderId = "common.please_enter",
	fieldNameSelect = "inputType",
	fieldNameInput = "inputValue"
}) => {
	const { formatMessage } = useLocale()

	const options = [
		{ value: 1, label: formatMessage({ id: "funds.proxy_name" }) },
		{ value: 2, label: formatMessage({ id: "funds.fund_audit.top_proxy_name" }) },
		{ value: 2, label: formatMessage({ id: "funds.order_no" }) }
	]

	return (
		<Space.Compact>
			<SFormItem name={fieldNameSelect}>
				<Select options={options} placeholder={formatMessage({ id: "common.please_choose" })} defaultValue={1} />
			</SFormItem>
			<SFormItem name={fieldNameInput}>
				<Input allowClear placeholder={formatMessage({ id: placeholderId })} />
			</SFormItem>
		</Space.Compact>
	)
}

export default SelectAndInputGroup
